<template>
	<view class="page-hostspot">
		<headerNav></headerNav>
		<common-page>
			<view>
				<!-- <view class="text-0"><u-image :src="banner" mode="widthFix" width="100%"></u-image></view> -->
				<common-banner :banner="banner"></common-banner>
				<common-content-wrapper>
					<round-card>
						<view class="menus">
							<view
								class="menu-item"
								v-for="(menu, index) in tabs"
								:key="index"
								@tap="() => handleMenuActiveChange(index)"
							>
								<view class="menu-item-bg"></view>
								<view class="menu-item-content flex flex-column justify-center item-center">
									<u-image
										width="25"
										height="25"
										:src="current === index ? menu.image.active : menu.image.normal"
									></u-image>
									<view class="mt-2 text-sm" :style="{color: current === index ? menu.fontcolor : 'inherit'}">{{ menu.name }}</view>
								</view>
							</view>
						</view>

						<view class="text-gray-light mt-3 text-sm px-8 leading-8">
							<text :style="{ color: contentStyle.color }">{{ info.describe }}</text>
							<rich-text :nodes="info.content"></rich-text>
						</view>
					</round-card>
				</common-content-wrapper>
			</view>
		</common-page>
	</view>
</template>

<script>
import categoryMixin from '@/mixins/common-category-mixin.js'
import detailMixin from '@/mixins/common-detail-mixin.js'
import headerNav from '@/components/layout/headerNav.vue'
export default {
	mixins: [categoryMixin, detailMixin],
	watch: {
		id(cur) {
			this.getservicedetail(cur)
		}
	},
	methods: {
		handleMenuActiveChange(index) {
			this.current = index
		}
	},
	components: {
		headerNav
	}
}
</script>

<style lang="scss" scoped>
.menus {
	display: grid;
	grid-template-columns: auto auto auto auto;
	padding: 0 76rpx;
	border-bottom: 2rpx solid #cccccc;
}

.menu-item-bg {
	box-sizing: border-box;
	content: '';
	display: block;
	position: absolute;
	right: -4rpx;
	top: 25%;
	width: 8rpx;
	height: 50%;
	background-color: #ffffff;
}
.menu-item-content {
	position: relative;
	z-index: 2;
}

.menu-item {
	box-sizing: border-box;
	padding: 20rpx 25rpx;
	border: 1rpx solid #cccccc;
	border-spacing: 50rpx;
	border-top-width: 0;
	border-right-width: 0;
	position: relative;
	&::before {
		box-sizing: border-box;
		content: '';
		display: block;
		position: absolute;
		left: -8rpx;
		top: 25%;
		width: 10rpx;
		height: 50%;
		background-color: #fff;
	}

	&::after {
		box-sizing: border-box;
		content: '';
		display: block;
		position: absolute;
		top: -8rpx;
		left: 25%;
		height: 10rpx;
		width: 50%;
		background-color: #fff;
	}

	&:nth-child(4n + 4) {
		border-right-width: 1rpx;
	}
	&:nth-child(n + 5) {
		border-bottom-width: 0;
	}
}
</style>
